import React, { useEffect, useState } from 'react';
import './index.css'
import {adminList,register,Deleteadmin,editadmin,userSearchs,usersearchtwo} from '../../../kwl/index';
import { Input, Space,Button,Table, Drawer,Form,Select,Radio,Tree,notification} from 'antd';
import { CaretDownOutlined ,CaretUpOutlined  } from '@ant-design/icons';
const { Search } = Input;
const Index = () => {
  const [form] = Form.useForm();
    //定义id
    var [id,setId] = useState('')
    //定义下拉状态
    var [next,setNext] = useState(false)
    var [zhi,setZhi] = useState("")
    var [zhitwo,setZhitwo] = useState("")
    //定义查询部门数据
    var [partement,setPartement] = useState([])
    const[pre,setPre] = useState(1)

    //按钮搜索框
    var onSearch = async (value:any)=>{
      // console.log(value);
      var res = await usersearchtwo({value})
      // console.log(res.data);
      setPartement(()=>{
        return partement = res.data.data
      })
      setData(()=>{
        return data = partement
      })
    }
    //打开下拉
    var setnext = ()=>{
        setNext(!next)
    }
    //打开抽屉
    //删除管理员
    var deleteadmin = async (record:any)=>{
        var res = await Deleteadmin(record)
        if(res.data.code==200){
            await adminlist()
            notification.success({message:'删除成功'})
        }else{
            notification.error({message:'删除失败'})
        }
    }
    //编辑管理员
    var handleedit = (record:any)=>{
        setOpen(true)
        form.setFieldsValue(record)
        setCheckedKeys(record.checkedKeys)
        setId(record.id)
    }
    //定义表格列
    var columns = [
        {
            title: '',
            render:(text:any, record:any, index:any)=> <>{index+1}</>
          },
        {
            title: '用户名',
            render:(text:any, record:any, index:any)=> <>{record.username}</>
          },
          {
            title: '手机号',
            render:(text:any, record:any, index:any)=> <>{record.phone}</>
          },
          {
            title: '所属部门',
            render:(text:any, record:any, index:any)=> <>{record.department}</>
          },
          {
            title: '状态',
            render:(text:any, record:any, index:any)=> <><p style={record.flag=='true'?{color:'green'}:{color:'red'}}>{record.flag=='true'?'启用':'禁用'}</p></>
          },
          {
            title: '备注',
            render:(text:any, record:any, index:any)=> <>{record.notes}</>
          },
          {
            title: '操作',
            render:(text:any, record:any, index:any)=> <>
            <Button type="primary" style={{marginRight:20}} onClick={()=>{handleedit(record)}}>编辑</Button>
            <Button type="primary" ghost danger onClick={()=>{deleteadmin(record)}}>删除</Button>
            </>
          },
    ]
    //定义数据
    var [data,setData] = useState([])
    //定义抽屉显示
    var [open,setOpen] = useState(false)
    //定义权限数组
    var [checkedKeys, setCheckedKeys] = useState([]);
    //请求管理员
    useEffect(()=>{
        adminlist()
    },[])
    //请求函数
    var adminlist = async ()=>{
        var res = await adminList()
        // console.log(res.data.data);
        setData(res.data.data)
    }

    //打开抽屉
    var opendraw = ()=>{
        setOpen(true)
    }
    //关闭抽屉
    var onClose = ()=>{
        setOpen(false)
        //清空表单的值
        form.setFieldsValue({username:'',password:'',phone:'',department:'',flag:'',notes:'',checkedKeys:''})
        //清空树形控件的值
        setCheckedKeys([])
    }
    //提交表单
    var onFinish = async (values:any)=>{
        if(id){
            var res = await editadmin(values)
            // console.log(res);
            if(res.data.code==200){
                await adminlist()
                notification.success({ message:'编辑成功!' })
                //清空表单的值
                form.setFieldsValue({username:'',password:'',phone:'',department:'',flag:'',notes:'',checkedKeys:''})
                //清空树形控件的值
                setCheckedKeys([])
                //关闭抽屉
                setOpen(false)
              }else{
                notification.error({ message:'编辑失败!' })
              }
        }else{
        var res = await register(values)
        if(res.data.code==200){
            await adminlist()
            notification.success({ message:'注册成功!' })
            //清空表单的值
            form.setFieldsValue({username:'',password:'',phone:'',department:'',flag:'',notes:'',checkedKeys:''})
            //清空树形控件的值
            setCheckedKeys([])
            //关闭抽屉
            setOpen(false)
          }else{
            notification.error({ message:'注册失败!' })
          }
        }
    }
    //提交失败
    var onFinishFailed = (res:any)=>{
        console.log(res);
    }

    //树形字典
    var treeData = [
        {
            title: '首页',
            key: '1',
          },
          {
            title: '订单管理',
            key: '2',
          },
          {
            title: '商品管理',
            key: '3',
          },
          {
            title: '财务管理',
            key: '4',
          },
          {
            title: '数据分析',
            key: '5',
          },
          {
            title: '操作员管理',
            key: '6',
          },
    ]

    //树复选框
    var onCheck:any = (checkedKeysvalue:any)=>{
        //保存最新的权限到表单中
        form.setFieldValue('checkedKeys',checkedKeysvalue);
        //保存最新的权限到树形控件对应的状态变量中
        setCheckedKeys(checkedKeysvalue);
        }
    //查询下拉框
        var handleChange = async (value:any)=>{
          // console.log(value);
          setZhi(()=>{
            return zhi =value 
          })
          var res = await userSearchs({zhi,zhitwo})
          // console.log(res.data);
          setPartement(()=>{
            return partement = res.data.data
          })
          setData(()=>{
            return data = partement
          })
        }
    //查询下拉框2
    var handleChangeOne = async (value:any) =>{
      setZhitwo(()=>{
        return zhitwo = value
      })
      var res =await userSearchs({zhi,zhitwo})
      // console.log(res.data);
      setPartement(()=>{
        return partement = res.data.data
      })
      setData(()=>{
        return data = partement
      })
    }
    return (
        <div className='admin'>
            <div className='ad-top'>
                    <Search
            placeholder="输入用户名搜索"
            enterButton="搜索"
            onSearch={onSearch}
            style={{width:500,marginLeft:20,marginRight:20}}
            />
            <Button type="primary" ghost onClick={setnext}>更多筛选项 {next?<CaretUpOutlined />:<CaretDownOutlined />} </Button>
            </div>
            {/* 下拉查询 */}
            <div className='mid' style={next?{height:80}:{height:0}}>
              <div className='one'>
            所属部门： <Select
            defaultValue="全部"
            style={{ width: 220 }}
            onSelect={handleChange}
            options={[
              { value: '全部', label: '全部' },
              { value: '运营部', label: '运营部' },
              { value: '客服部', label: '客服部' },
              { value: '仓库部', label: '仓库部' },
            ]}
          />
              </div>
              <div>
            状态： <Select
            defaultValue="全部"
            style={{ width: 220 }}
            onSelect={handleChangeOne}
            options={[
              { value: '全部', label: '全部' },
              { value: 'true', label: '启用' },
              { value: 'false', label: '禁用' },
            ]}
          />
              </div>
            </div>
            <Button type="primary" className='btn' onClick={opendraw}>添加管理员</Button>
            <Table className='tab' columns={columns} dataSource={data} />
            <Drawer title="添加管理员" onClose={onClose} open={open}>
            <Form
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                label="姓名"
                name="username"
                rules={[{ required: true, message: '请输入用户名' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码' }]}
                >
                <Input.Password />
                </Form.Item>
                <Form.Item
                label="手机号"
                name="phone"
                rules={[{ required: true, message: '请输入手机号' }]}
                >
                <Input />
                </Form.Item>
                <Form.Item label="部门" name="department">
                    <Select>
                    <Select.Option value="运营部">运营部</Select.Option>
                    <Select.Option value="客服部">客服部</Select.Option>
                    <Select.Option value="仓库部">仓库部</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item name="flag" label="状态">
                <Radio.Group>
                    <Radio value="true">启用</Radio>
                    <Radio value="false">禁用</Radio>
                </Radio.Group>
                </Form.Item>
                <Form.Item
                label="备注"
                name="notes"
                rules={[{ required: true, message: '请输入备注' }]}
                >
                <Input />
                </Form.Item>
                <Form.Item
                label="权限"
                name="checkedKeys"
                rules={[{ required: true, message: '请选择权限' }]}
                >
                <Tree
                checkable
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                treeData={treeData}
                />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
};

export default Index;